<template>
  <button 
    class="base-button" 
    :class="[
      `base-button--${type}`,
      { 'base-button--block': block },
      { 'base-button--round': round },
      { 'base-button--disabled': disabled },
      { 'base-button--loading': loading },
      { 'base-button--mini': mini },
      sizeClass
    ]"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <view v-if="loading" class="base-button__loading"></view>
    <image v-if="icon && !loading" class="base-button__icon" :src="icon" mode="aspectFit"></image>
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'BaseButton',
  props: {
    /**
     * 按钮类型：primary, secondary, text
     */
    type: {
      type: String,
      default: 'primary',
      validator: (value) => ['primary', 'secondary', 'text'].includes(value)
    },
    /**
     * 按钮尺寸：small, normal, large
     */
    size: {
      type: String,
      default: 'normal',
      validator: (value) => ['small', 'normal', 'large'].includes(value)
    },
    /**
     * 是否为块级按钮（宽度100%）
     */
    block: {
      type: Boolean,
      default: false
    },
    /**
     * 是否为圆形按钮
     */
    round: {
      type: Boolean,
      default: false
    },
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示加载状态
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 按钮图标
     */
    icon: {
      type: String,
      default: ''
    },
    /**
     * 是否为迷你按钮
     */
    mini: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    sizeClass() {
      return this.size !== 'normal' ? `base-button--${this.size}` : '';
    }
  },
  methods: {
    handleClick(event) {
      if (!this.disabled && !this.loading) {
        this.$emit('click', event);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./BaseButton.scss";
</style> 